//
// Input & Select & Textarea
// --------------------------------------------------


@input-text-color: #555;
@placeholder-color: #999;
@input-border-color: #ccc;
@input-padding-horizonal: 8px;


::-webkit-input-placeholder {
  color: @placeholder-color;
}

:-moz-placeholder { /* Firefox 18- */
  color: @placeholder-color;
}

::-moz-placeholder {  /* Firefox 19+ */
  color: @placeholder-color;
}

:-ms-input-placeholder {
  color: @placeholder-color;
}

// Override content-box in Normalize
input[type="search"] {
    box-sizing: border-box;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="time"],
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="tel"],
input[type="number"], 
input[type="month"], 
input[type="week"], 
select, 
textarea {
    height: @input-height-base;
    padding: (@input-height-base - 2 - @font-size-base * @line-height-base) / 2 @input-padding-horizonal;
    line-height: @line-height-base;
    background-color: #fff;
    color: @input-text-color;
    font-size: @font-size-base;
    font-family: @font-family-base;
    border: 1px solid @input-border-color;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: none;

    &:focus {
        border-color: darken(@input-border-color, 16%);
        outline: none;
        box-shadow: none;
    }

    &:disabled {
        background-color: @bg-disabled !important;
        color: @text-color-disabled !important;
        cursor: default;
    }

    &[readonly] {
        cursor: default;
    }

    &.round {
        padding: 6px @input-padding-horizonal + 5;
        border-radius: @input-round-radius;
    }

    &.bold {
        border-width: 2px;
    }

    &.shadow {
        box-shadow: @input-shadow;

        &:focus {
            box-shadow: @input-shadow;
        }
    }

    &.success {
        border-color: @color-success;
    }

    &.error {
        border-color: @color-danger;
    }
}

textarea {
    height: auto;
    min-height: 90px;
    padding: 6px @input-padding-horizonal;
}

.input-file {
    position: relative;
    display: inline-block;
    width: 400px;
    height: @btn-height-base;

    [type="file"] {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        cursor: pointer;
        opacity: 0;
    }

    .btn,
    .btn-outline {
        float: left;
        position: relative;
        top: 1px;
        cursor: pointer;
    }

    .file-path-wrapper {
        display: block;
        margin-left: 60px;
        overflow: hidden;
    }

    .file-path {
        width: 100%;
        height: @btn-height-base;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid #aaa;
    }
}

.input-wrapper {
	position: relative;
    display: inline-block;
    height: @input-height-base; 
    line-height: @input-height-base;

    > input {
    	display: inline-block;
    	width: 100%;

		&:last-child {
			padding-left: 28px;
		}

    	&:not(:last-child) {
    		padding-right: 28px;
    	}
    }

    > i {
    	position: absolute;
        top: 8px;
    	color: #888;
    	font-size: @font-size-base + 2;
    }

    .input-left-icon {
    	left: 10px;
    }

    .input-right-icon {
    	right: 10px;
    }

    .input-search-icon {
        right: 10px;
        cursor: pointer;

        &:hover {
            color: @primary-color;
        }
    }
}

.input-group {
    position: relative;
    display: inline-block;
    // .clearfix();
    font-size: 0;

	> input,
    > div,
    > span,
    > a,
    > button {
		// float: left;
        position: relative;
        vertical-align: middle;
        font-size: @font-size-base;

        &:last-child,
        &:last-child input {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:not(:last-child),
        &:not(:last-child) input {
            margin-right: -1px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        
        &:not(:first-child):not(:last-child),
        &:not(:first-child):not(:last-child) input {
            border-radius: 0;
        }
    }

    > div,
    > span {
        z-index: 1;
    }

    > .input-label {
        display: inline-block;
        height: @input-height-base;
        line-height: @input-height-base - 2;
        padding: 0 10px;
        background-color: #eee;
        color: @input-text-color;
        font-size: @font-size-base;
        border: 1px solid @input-border-color;
        border-radius: @border-radius-base;
        z-index: 0;
    }

    input:focus,
    input:focus + i,
    .mui-select-trigger:focus + .mui-select-caret {
        z-index: 1;
    }

    > .btn,
    > .btn-outline {
        height: @input-height-base;
    }
}